<!--
 * @Author: boyyang
 * @Date: 2022-01-02 20:34:21
 * @LastEditTime: 2022-02-05 22:32:37
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\login\loginBtn.vue
-->

<template>
    <div class="login-btn" @click="btnClick">{{ props.btnText }}</div>
</template>

<script lang="ts" setup>
interface Props {
    btnText: string
}

interface Emits {
    (e: 'btnClick'): void
}
const props = withDefaults(defineProps<Props>(), {
    btnText: '确 定'
})

const emit = defineEmits<Emits>()

const btnClick = (): void => {
    emit('btnClick')
}


</script>

<style scoped lang="scss">
.login-btn {
    box-sizing: border-box;
    width: 100%;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(22, 24, 35, 0.6);
    border-radius: 5px;
    cursor: pointer;
    color: whitesmoke;

    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 600;
    font-size: 16px;

    &:hover {
        background-color: rgba(22, 24, 35, 1);
        color: whitesmoke;
        font-size: 16px;
    }

    transition: all 0.4s linear;
}
</style>
